<template>
  <div style="padding: 20px">
    <!-- 角色管理 -->

    <!-- 搜索框 -->
    <el-form inline>
      <el-form-item>
        <el-input placeholder="角色名称" v-model="searchInfo"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchRoleInfo"
          >查询</el-button
        >
        <el-button @click="clearSearchInfo">清空</el-button>
      </el-form-item>
    </el-form>

    <!-- 添加/批量删除按钮 -->
    <div style="margin: 0 0 20px 0">
      <el-button type="primary" @click="addRole">添加</el-button>
      <el-button type="danger" @click="deleteAllSelect">批量删除</el-button>
    </div>

    <!-- 角色表格 -->
    <el-table
      border
      stripe
      :data="userRoleList"
      @selection-change="tableSelectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="角色名称" prop="roleName">
        <template v-slot="{ row }">
          <!-- {{row}} -->

          <!-- 编辑框 -->

          <el-input
            v-if="row.isEdit"
            placeholder=""
            size="mini"
            style="margin: 0 0 5px 0"
            v-model="updateInput"
          ></el-input>
          <el-button
            v-if="row.isEdit"
            type="warning"
            size="mini"
            icon="el-icon-refresh-left"
            @click="row.isEdit = false"
            >取消</el-button
          >

          <!-- 角色名 -->
          <span v-if="!row.isEdit">{{ row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-button
            type="info"
            icon="el-icon-info"
            size="mini"
            title="分配权限"
            @click="$router.push({ name: 'RoleAuth', params: { id: row.id } })"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-check"
            size="mini"
            title="确定"
            @click="sureToUpdate(row)"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit-outline"
            size="mini"
            title="修改角色"
            @click="editRole(row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            title="删除角色"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[5, 10, 15]"
      @current-change="currentPageChange"
      @size-change="pageSizeChange"
      layout="prev,pager,sizes,total,->,jumper"
    ></el-pagination>

    <!-- 添加dialog -->
    <el-dialog
      title="添加角色"
      :visible.sync="addRoleDialogVisiable"
      width="500px"
    >
      <el-form>
        <el-form-item label="请输入新名称">
          <el-input type="text" v-model="roleName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="SubmitAddForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqGetUserRoleListByPage,
  reqAddRole,
  reqDeleteRoleList,
  reqUpdateRoleInfo,
} from "@/api/role";
import { Message } from "element-ui";
export default {
  name: "Role",
  data() {
    return {
      //数据1:当前页
      currentPage: 1,
      //数据2:每页条数
      pageSize: 5,
      //数据3:分页角色列表(搜索)
      userRoleList: [],
      //数据4:总条数
      total: 0,
      //数据5:控制添加dialog显示隐藏
      addRoleDialogVisiable: false,
      //数据6:添加表单绑定数据
      roleName: "",
      //数据7：搜索输入框 绑定的表单数据
      searchInfo: "",
      //数据8：表格中被选中的项 id列表
      selectionRoles: [],
      //数据9:更新input输入值
      updateInput:""
      
    };
  },
  methods: {
    //方法1:获取分页角色列表(搜索)
    async getUserRoleListByPage(roleName) {
      var result;
      try {
        if (roleName) {
          //有roleName 是搜索逻辑
          result = await reqGetUserRoleListByPage(1, this.pageSize, roleName);
        } else {
          //没有roleName 是普通逻辑
          result = await reqGetUserRoleListByPage(
            this.currentPage,
            this.pageSize
          );
        }
        // console.log("result", result);
        this.userRoleList = result.data.items;

        //给每一项数据添加isEdit属性,记录是否在编辑状态
        this.userRoleList.forEach((item) => {
          this.$set(item, "isEdit", false);
        });

        this.total = result.data.total;
      } catch (error) {
        Message.error("获取分页角色列表失败");
      }
    },
    //方法2：当前页改变事件
    currentPageChange(v) {
      this.currentPage = v;
      this.getUserRoleListByPage();
    },
    //方法3：每页条数改变事件
    pageSizeChange(v) {
      this.pageSize = v;
      this.getUserRoleListByPage();
    },
    //方法4:添加按钮的点击事件
    async addRole() {
      this.roleName = "";
      this.addRoleDialogVisiable = true;
    },
    //方法5：添加dialog中确定提交表单事件
    async SubmitAddForm() {
      try {
        await reqAddRole(this.roleName);
        this.addRoleDialogVisiable = false;
        this.getUserRoleListByPage();
        Message.success("添加成功");
      } catch (error) {
        Message.error("添加失败");
      }
    },
    //方法6：查询按钮点击事件
    searchRoleInfo() {
      //调取分页请求 传入查询参
      this.getUserRoleListByPage(this.searchInfo);
    },
    //方法7：清空按钮点击事件
    clearSearchInfo() {
      this.searchInfo = "";
      this.currentPage = 1;
      this.getUserRoleListByPage();
    },
    //方法8：表格选中改变事件
    async tableSelectionChange(val) {
      console.log("val", val);
      this.selectionRoles = val.map((item) => item.id);
      console.log("selectionRoles", this.selectionRoles);
    },
    //方法9：批量删除按钮点击事件
    deleteAllSelect() {
      this.$confirm("此操作将永久删除纪录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await reqDeleteRoleList(this.selectionRoles);
            this.getUserRoleListByPage();
            Message.success("批量删除成功");
          } catch (error) {
            Message.error("批量删除失败");
          }
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //方法10:修改角色事件
    editRole(row) {
      console.log("row", row);
      row.isEdit = true;
      console.log("userRoleList", this.userRoleList);
      this.updateInput = row.roleName
    },
    //方法11:确定修改按钮
    async sureToUpdate(row){
      console.log('row',row);
      row.roleName = this.updateInput
      try{
        await reqUpdateRoleInfo(row)
        this.getUserRoleListByPage();
        Message.success("修改成功")
      }catch(e){
        Message.error("修改失败")
      }
    },
  },
  mounted() {
    //初始化1:请求获取分页角色列表(搜索)
    this.getUserRoleListByPage();
  },
};
</script>

<style></style>
